<template>
	<view :class="['c-model', showBg ? '' : position]" :style="[{ zIndex: zIndex }, mStyle]" @touchmove.stop.prevent v-if="isShow">
		<view
			:class="['c-model-bg ', animation ? 'showBg' : 'hideBg']"
			:style="[{ transition: 'all ' + duration + 'ms' }, bgStyle]"
			@touchmove.stop.prevent
			v-if="showBg && isShow"
			@tap.stop="handleMaskHide"
		></view>
		<!-- content -->
		<view
			:class="['c-model-content', position, animation ? 'show' + position : 'hide' + position]"
			@transitionend="endhide"
			:style="[{ transition: 'all ' + duration + 'ms' }, cStyle]"
			:change:prop="touch.propObserver"
			:prop="touchProp"
			@mousedown="touch.touchstart"
			@mousemove="touch.touchmove"
			@mouseup="touch.touchend"
			@touchmove="touch.touchmove"
			@touchstart="touch.touchstart"
			@touchend="touch.touchend"
		>
			<!-- 			 -->
			<view class="close" v-if="closeBtn" @tap.stop="hideModal"></view>
			<slot />
			<view class="safe-area-inset-bottom" v-if="position != 'center' && position != 'top'"></view>
		</view>
	</view>
</template>
<wxs module="touch" src="./touch.wxs"></wxs>
<script>
/**
 * popup
 * @description
 * @property {String} width 弹窗宽度   position为top和bottom无效
 * @property {Boolean} value 控制显示 使用 v-model
 * @property {Boolean} mask 背景
 * @property {Boolean} closeBtn 是否显示关闭图标
 * @property {String} position 弹出方向 showBg
 * @property {Boolean} mask 背景
 * @property {Boolean} showBg 是否显示背景 不需要背景时 position:left/right请设置固定宽度（不支持百分比）  center不支持无背景
 * @property {String} padding 内容区内边距
 * @property {Object} contentStyle 内容区自定义样式
 * @property {Object}  modalStyle 弹出外层盒子样式
 * @property {Number String}  zIndex 弹窗层级
 * @property {Number}  duration 过度时间
 * @property {String}  round 圆角
 * @property {Boolean} canSlide 是否允许弹窗滑动
 **/
export default {
	data() {
		return {
			animation: false,
			isShow: false,
			panStyle: null,
		}
	},
	props: {
		width: {
			type: String,
			default: '70%',
		},
		// 双向绑定value
		value: {
			type: Boolean,
			default: false,
		},
		mask: {
			type: Boolean,
			default: true,
		},
		closeBtn: {
			type: Boolean,
			default: false,
		},
		position: {
			type: String,
			default: 'center', // right left top bottom center
		},
		showBg: {
			type: Boolean,
			default: true, //不需要背景时 position:left/right请设置固定宽度  center不支持无背景
		},
		bgStyle: {
			type: Object,
			default: () => {},
		},
		padding: {
			type: String,
			default: '0',
		},
		contentStyle: {
			type: Object,
			default() {
				return {}
			},
		},
		modalStyle: {
			type: Object,
			default() {
				return {}
			},
		},
		zIndex: {
			type: [String, Number],
			default: 10000,
		},
		duration: {
			type: Number,
			default: 300,
		},
		round: {
			type: String,
			default: '0',
		},
		canSlide: {
			type: Boolean,
			default: true,
		},
		ejectMode: {
			// 弹窗弹起是 用setTimeout还是 $nextTick
			type: String,
			default: 'setTimeout',
		},
	},
	computed: {
		mStyle() {
			let style = this.modalStyle
			return style
		},
		cStyle() {
			let style = { ...this.contentStyle, ...this.panStyle }
			let position = this.position
			let r = this.round
			if (position === 'top' || position === 'bottom') {
				style.width = '100%'
			} else {
				style.width = this.width
			}
			if (r !== '0') {
				if (this.position == 'center') r = [r, r, r, r]
				else if (this.position == 'bottom') r = [r, r, 0, 0]
				else if (this.position == 'left') r = [0, r, r, 0]
				else if (this.position == 'right') r = [r, 0, 0, r]
				else r = [0, 0, r, r]
				style.borderRadius = `${r.join(' ')}`
			}
			style.padding = this.padding
			return style
		},
		touchProp() {
			//console.log('弹窗方向变化', this.position)
			return { position: this.position, canSlide: this.canSlide, duration: this.duration }
		},
	},
	watch: {
		value: {
			immediate: true,
			handler(val) {
				if (val === this.isShow) return
				if (val) {
					this.showModal()
				} else {
					this.hideModal() //直接关闭
				}
			},
		},
		isShow(val) {
			this.$emit('input', val)
		},
	},
	methods: {
		showModal() {
			this.isShow = true
			if (this.ejectMode === 'setTimeout') {
				// 此方法连续点击在小程序中会导致弹窗弹起缓慢 uView使用此方法 看个人抉择
				this.startTimer(() => {
					this.animation = true
					// 动画结束事件推送
					this.startTimer(() => {
						this.$emit('showed', this.value)
					})
				}, 50)
			} else {
				// 使用此方法有时候动画会出不来
				this.$nextTick(() => {
					this.animation = true
					// 动画结束事件推送
					this.startTimer(() => {
						this.$emit('showed', this.value)
					}, this.duration)
				})
			}
		},

		hideModal() {
			this.animation = false
			// 关闭销毁弹窗
			// 定时器关闭动画 目前使用@transitionend关闭 如果过度时间为0 不会触发@transitionend 需要使用定时器关闭
			if (this.duration === 0) {
				this.startTimer(() => {
					this.isShow = false
					this.$emit('closed', {
						detail: 'closed',
					})
				})
			}
		},

		// 定时器
		startTimer(callback, time) {
			if (this.timer) clearTimeout(this.timer)
			this.timer = setTimeout(() => {
				callback && callback()
			}, time || this.duration)
		},

		// 过度完成
		// @transitionend="endhide"
		endhide() {
			// console.log('过度完成',this.value,this.animation)
			if (!this.animation) {
				this.isShow = false
				this.$emit('closed', {
					detail: 'closed',
				})
			}
		},

		//点击背景关闭
		handleMaskHide() {
			if (this.mask) this.hideModal()
			this.$emit('mask')
		},
	},
}
</script>
<style>
/* components/c-model/c-model.wxss */
.c-model {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10000;
	width: 100%;
}

.c-model.left {
	width: 0;
	right: auto;
}

.c-model.top {
	height: 0;
	bottom: auto;
}

.c-model.bottom {
	height: 0;
	top: auto;
}

.c-model.right {
	width: 0;
	left: auto;
}

.c-model-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.6);
	transition: opacity 0.5s;
}

.c-model-bg.bg_transparent {
	background-color: transparent;
}

.close {
	width: 50rpx;
	height: 50rpx;
	position: absolute;
	right: 10px;
	top: 10rpx;
	z-index: 999;
}

.close::before,
.close::after {
	content: '';
	display: inline-block;
	width: 30rpx;
	height: 2rpx;
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: #ccc;
}

.close::after {
	transform: translate(-50%, -50%) rotate(45deg);
}

.close::before {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.c-model-content {
	background-color: #fff;
	z-index: 101;
	overflow: hidden;
	padding: 20rpx;
	/* transition: all 0.3s; */
	box-sizing: border-box;
}

.c-model-content.center {
	width: 80%;
	border-radius: 10rpx;
	transform: scale(1.1);
	-webkit-transform: translate3d(0, 0, -1px);
}

.center.showcenter {
	transform: scale(1);
	opacity: 1;
	-webkit-transform: translate3d(0, 0, -1px);
}

.center.hidecenter {
	transform: scale(1.1);
	opacity: 0;
}

.c-model-content.left {
	position: absolute;
	left: 0;
	top: 0;
	width: 40%;
	height: 100%;
	background-color: #fff;
	transition: all 0.5s;
	transform: translateX(-110%);
	border-radius: 0 10rpx 10rpx 0;
}

.left.showleft {
	transform: translateX(0);
}

.left.hideleft {
	transform: translateX(-110%) !important;
}

.c-model-content.right {
	position: absolute;
	right: 0;
	top: 0;
	width: 40%;
	height: 100%;
	background-color: #fff;
	transition: all 0.5s;
	transform: translateX(110%);
	border-radius: 10rpx 0 0 10rpx;
}

.right.showright {
	transform: translateX(0);
}

.right.hideright {
	transform: translateX(110%) !important;
}

.c-model-content.top {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	background-color: #fff;
	transition: all 0.5s;
	transform: translateY(-110%);
	border-radius: 0;
}

.top.showtop {
	transform: translateY(0);
}

.top.hidetop {
	transform: translateY(-110%) !important;
}

.c-model-content.bottom {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #fff;
	transition: all 0.5s;
	transform: translateY(110%);
	border-radius: 0;
	padding-bottom: env(safe-area-inset-bottom);
}

.bottom.showbottom {
	transform: translateY(0);
}

.bottom.hidebottom {
	transform: translateY(110%) !important;
}

/* 背景 */
.showBg {
	opacity: 1;
}

.hideBg {
	opacity: 0;
}
</style>
